FreshにTwind v1サポートが入りました
概要
セットアップ
code:shell
# NOTE: 途中でTailwind CSSを使うか質問されますが、ここでyと答えるとTwind v0.16向けのプラグインが有効化されるためご注意
...
Fresh has built in support for styling using Tailwind CSS. Do you want to use this? y/N N ...
code:import_map.json
{
"imports": {
// 以下を追加
}
}
twind.config.tsを用意して、twindの設定を行います。 code:twind.config.ts
import type { Options } from "$fresh/plugins/twindv1.ts";
import { defineConfig } from "twind";
export default {
...defineConfig({
}),
selfURL: import.meta.url,
} as Options;
main.tsを以下のように編集します。
code:main.ts
/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />
import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
// twindv1プラグインを読み込みます。
import twindv1 from "$fresh/plugins/twindv1.ts";
import twindConfig from "./twind.config.ts";
await start(manifest, {
});
あとは通常通り、deno task startでサーバを起動できます。
参考